<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
   <!--	 top css-->
	<link href="css/Top.css" rel="stylesheet" type="text/css">
	
	<!-- Document Title -->
    <title>picWall</title>

    <!-- 网页图标 -->
    <link rel="shortcut icon" type="image/png" href="./img/logo.png">

<style type="text/css">
body{ background-color: #efefef;}

#content  img{width: 280px; padding: 10px; border: 1px solid #ccc; box-shadow:2px 2px 3px rgba(50,50,50,.4); position: absolute; z-index: 1; background: #fff; }
#content  img:nth-child(1){
	left: 300px;
	top:0px;
	-webkit-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
#content img:nth-child(2){
	left: 600px;
	top: 0px;
	-webkit-transform:rotate(4deg);
	-ms-transform:rotate(4deg);
	transform:rotate(4deg);
}
#content img:nth-child(3){
	left:900px;
	top:0;
	-webkit-transform:rotate(-6deg);
	-ms-transform:rotate(-6deg);
	transform:rotate(-6deg);
}
#content img:nth-child(4){
	left:300px;
	top: 200px;
	-webkit-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	transform:rotate(3deg);
}
#content img:nth-child(5){
	left: 610px;
	top: 200px;
	-webkit-transform:rotate(-20deg);
	-ms-transform:rotate(-20deg);
	transform:rotate(-20deg);
}
#content img:nth-child(6){
	left: 900px;
	top:200px;
	-webkit-transform:rotate(3deg);
	-ms-transform:rotate(3deg);
	transform:rotate(3deg);
}
#content img:hover{
	-webkit-transform:rotate(0deg) scale(1.5);
	-ms-transform:rotate(0deg) scale(1.5);
	transform:rotate(0deg) scale(1.5);
	-webkit-transition:all 0.5s ease-in;
	transition:all 0.5s ease-in;
	z-index: 2;
}
	
	#content {
		margin-top: 15%;
		margin-left: 15%;
		width: 100%;
		height: 100%;
	}
</style>

</head>
<body>

	<div id="box">
	  <div id="top">
			<div id="logo"><img src="img/indexLogo.png" width="64" height="64" alt=""/></div>
			<div id="text">PicWall</div>
			<div id="HASS">
				<div><a href="./index.html">Home</a></div>
				<div><a href="./about.html">About</a></div>
				<div><a href="./chart.html">Chart</a></div>
				<div><a href="./area.html">Area</a></div>
		  	</div>
	  </div>
	
	<div id="content">    
		<img src="img/picwall1.jpg" alt="picwall"/> 
		<img src="img/picwall2.jpg"  alt="picwall"/>
		<img src="img/picwall3.jpg"  alt="picwall"/>
		<img src="img/picwall4.jpg"  alt="picwall"/>
		<img src="img/picwall5.jpg"  alt="picwall"/>
		<img src="img/picwall6.jpg"  alt="picwall"/>
	</div>
	
</div>


</body>
</html>
